<template>
    <div>
        <div class="box2">
            <div class="box1">
                <div class="top">
                    <div class="box">
                        <Search />
                    </div>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <el-row class="mb-4">
                        <el-button>重置</el-button>
                        <el-button type="primary">查询搜索</el-button>
                    </el-row>
                </div>
            </div>
            <div class="you">
                <span>
                    优惠卷名称<el-input placeholder="优惠卷名称" />
                </span>
                <span>
                    <el-form-item label="优惠卷类型">
                        <el-select v-model="form.type" placeholder="全部">
                            <el-option label="全场赠卷" value="0">全场赠卷</el-option>
                            <el-option label="会员赠卷" value="1">会员赠卷</el-option>
                            <el-option label="购物赠卷" value="2">购物赠卷</el-option>
                            <el-option label="注册赠卷" value="3">注册赠卷</el-option>
                        </el-select>
                    </el-form-item>
                </span>
            </div>
        </div>
    </div>
    <div class="tian">
        <div class="top">
            <div class="box">
                <Tickets />
            </div>
            <span style="margin-left: 10px;">数据列表</span>
        </div>
        <div class="bottom">
            <el-row class="mb-4">
                <el-button>添加</el-button>
            </el-row>
        </div>
    </div>
    <!-- 表格 -->
    <div class="table-container">
        <el-table :data="False" border style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="优惠卷名称" />
            <el-table-column prop="type" label="优惠卷类型">
                <template #default="{ row }">
                    {{ paymentMethod(row.type) }}
                </template>
            </el-table-column>
            <el-table-column prop="useType" label="可使用商品" >
                <template #default="{ row }">
                    {{ AllClassifications(row.useType) }}
                </template>
            </el-table-column>
            <el-table-column prop="count" label="使用门槛">
                <template #default="scope">
                    <span>满{{ scope.row.count }}元可用</span>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="面值">
                <template #default="scope">
                    <span>{{ scope.row.amount }}元</span>
                </template>
            </el-table-column>
            <el-table-column prop="platform" label="适用平台">
                <template #default="{ row }">
                    {{ AllPlatforms(row.platform) }}
                </template>
            </el-table-column>
            <el-table-column prop="startTime,endTime" label="有效期">
                <template #default="scope">
                    {{ dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss") }} 至 {{
                        dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="startDate" label="状态" />
            <el-table-column label="操作" width="120">
                <template #default="{}">
                    <el-button link type="primary" size="small">查看</el-button>
                    <el-button link type="primary" size="small">编辑</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as http from '@/request/http'
import { dayjs } from 'element-plus'
import { reactive } from 'vue';
import { number } from 'echarts';

const False = ref([])
const refresh = () => {
    http.coupon.couponList().then(res => {
        console.log(res);
        False.value = res.data.list as any
    })
}
refresh()
const form = reactive({
    type: number,
    startDate:'已过期'
})


const paymentMethod = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const paymentMethod = ['全场赠券', '会员赠券', '购物赠券', '注册赠券'];
    return paymentMethod[number] || '未知状态';
}


const AllPlatforms = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const AllPlatforms = ['全平台', '移动平台', 'PC平台'];
    return AllPlatforms[number] || '未知状态';
}

const AllClassifications = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const AllClassifications = ['全场通用', '指定分类', '指定商品'];
    return AllClassifications[number] || '未知状态';
}

</script>

<style scoped>
.box {
    width: 15px;
    height: 15px;

}

.box1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.box2 {
    height: 60px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;

}

.top {
    display: flex;
}

.el-input {
    width: 300px;
}

.tian {
    display: flex;
    justify-content: space-between;

    border: 1px solid gainsboro;
    height: 50px;
    line-height: 50px;
    margin: 20px;
    border-radius: 10px;
    padding: 10px;
}

.bottom {
    margin-top: 10px;
}

.fen {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}

.you {
    display: flex;

}

.el-form-item {
    display: flex;
    margin-left: 10px;
}

.el-select {
    margin-left: 10px;
}

.el-input {
    margin-left: 10px;
}

:deep(.el-form-item__label) {
    line-height: 32px;
}</style>